<template>
  <div class="wrapper" ref="bscroll">
    <div class="content">
      <movie-item v-for="movie in movies" :key="movie.id" :movie="movie"></movie-item>
    </div>
  </div>
</template>

<script>
// import movies from "../assets/jsons/movies.json";
import MovieItem from "../components/MovieItem";
import BScroll from "@better-scroll/core";
import Pullup from "@better-scroll/pull-up";
import MouseWheel from "@better-scroll/mouse-wheel";
import { getIninMovie, getMoreMovies } from "../api/index";
BScroll.use(Pullup);
BScroll.use(MouseWheel);
export default {
  components: {
    MovieItem
  },
  props: {},
  data() {
    return {
      movies: [],
      movieIds:[]
    };
  },
  watch: {},
  computed: {},
  methods: {},
  created() {
    this.bScroll = null;
  },
  mounted() {
    this.bScroll = new BScroll(this.$refs["bscroll"], {
      scrollY: true,
      pullUpLoad: true,
      mouseWheel: {
        speed: 20, 
        invert: false,
        easeTime: 300
      } 
    });
    this.bScroll.on("pullingUp", () => {
      console.log("上拉");
      const slicedMovieIds = this.movieIds.slice(0,2)
      getMoreMovies(slicedMovieIds).then(data => {
        const {coming} = data;
        this.movies = this.movies.concat(coming);
        // console.log(data);
        this.bScroll.finishPullUp();
        this.bScroll.refresh();
      });
    });
    getIninMovie().then(data => {
      // 起别名
      const { movieList: movies,movieIds } = data;
      this.movies = movies;
      this.movieIds = movieIds
      // 最近改动数据之后，触发了渲染并且渲染完成之后会调用
      this.$nextTick(() => {
        this.bScroll.refresh();
      });
    });
  }
};
</script>
<style lang="scss" scoped>
.wrapper {
  height: 100%;
  overflow: auto;
  .content {
    height: auto;
  }
}
</style>